import { Radar } from '@ant-design/charts';
import React, { memo } from 'react';

interface AtlasItem {
  name: string;
  star: number;
}

interface AnalysisAtlasProps {
  atlasList?: AtlasItem[];
  aliasStr?: string;
  fillOpacity?: number;
  fill?: string;
  alternateColor?: string;
  lineColor?: string;
  atlasWidth?: number;
  atlasHeight?: number;
  atlasSpan?: number;
  atlasParag?: number;
  atlasMin?: number;
  atlasMax?: number;
}

const AnalysisAtlas: React.FC<AnalysisAtlasProps> = memo(({
  atlasList = [],
  aliasStr = '',
  fillOpacity = 0.2,
  fill = 'rgb(60, 110, 238)',
  alternateColor = 'rgba(0, 0, 0, 0.04)',
  lineColor = 'rgb(60, 110, 238)',
  atlasWidth = 400,
  atlasHeight = 400,
  atlasSpan = 25,
  atlasParag = 4,
  atlasMin = 0,
  atlasMax = 100
}) => {
  const spanList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    .slice(0, atlasParag + 1)
    .map(item => (Number(item) * atlasSpan).toString());

  const config = {
    data: atlasList,
    xField: 'name',
    yField: 'star',
    width: atlasWidth,
    height: atlasHeight,
    appendPadding: [20, 20, 20, 20],
    meta: {
      star: {
        alias: aliasStr,
        min: atlasMin,
        max: atlasMax,
        nice: true,
        formatter: (v: number) => v,
        values: spanList
      }
    },
    xAxis: {
      tickLine: null,
      label: {
        style: {
          fontSize: 14,
          fill: '#666'
        }
      }
    },
    yAxis: {
      label: {
        style: {
          fontSize: 12,
          fill: '#666'
        }
      },
      grid: {
        alternateColor
      }
    },
    point: {
      size: 4,
      style: {
        fill: fill,
        stroke: lineColor
      }
    },
    lineStyle: {
      fill,
      fillOpacity,
      cursor: 'pointer',
      stroke: lineColor,
      lineWidth: 2
    }
  };

  return <Radar {...config} />;
});

AnalysisAtlas.displayName = 'AnalysisAtlas';

export default AnalysisAtlas; 